// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, TextInput, ImageBackground, ScrollView, InteractionManager } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import { Actions } from 'react-native-router-flux';
import Icon from 'react-native-vector-icons/Ionicons';

// antd 按需加载
import { Tabs, Toast } from 'antd-mobile-rn';

// 引入 处理数据 所需文件
import { searchAsync, searchLogDel, searchRecommend } from '../../module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, defaultDataList, onEndReached, onRefresh, concatDataList, defaultPage } from '../../util/utils.js'
import Item from 'antd-mobile-rn/lib/list/ListItem.native';
class Search extends Component {

  constructor(props) {
    super(props)
    this.state = {
      asyncList: [],
      recommendList: []
    }
  }

  componentDidMount() {
    this.searchAsync()
    this.searchRecommend()
  }

  // 用户搜索记录 /search/log
  searchAsync(options) {
    searchAsync({ current: 1, size: 10 }).then(res => {
      this.setState({
        asyncList: res.data
      })
    })
  }

  // 删除搜索记录 /search/log/del
  searchLogDel(id) {
    searchLogDel({ id }).then(res => {
      this.searchAsync()
      Toast.success(res.message)
    })
  }

  // 热门搜索/推荐搜索词 /search/recommend
  searchRecommend(options) {
    searchRecommend().then(res => {
      this.setState({
        recommendList: res.data
      })
    })
  }

  render() {
    const { asyncList, recommendList } = this.state
    return (
      <View style={Style.container}>
        <Status />
        <NavBar
          title="搜索"
          back={true}
        />
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            alignItems: 'flex-start',
            padding: 15
          }}
        >
          <TextInput
            ref={(r) => this.search = r}
            placeholder="请输入搜索内容"
            placeholderTextColor="#61676F"
            style={{
              flex: 1,
              height: 36,
              lineHeight: 36,
              backgroundColor: '#EEEEEE',
              borderRadius: 3,
              borderWidth: 0,
              padding: 0,
              paddingLeft: 15,
              paddingRight: 15,
              color: '#333'
            }}
            underlineColorAndroid="transparent"
          />
          <TouchableOpacity
            onPress={() => {
              Actions.searchResults({ keyword: this.search._lastNativeText })
            }}
          ><Text style={{ fontSize: 14, color: '#61676F', lineHeight: 36, marginLeft: 10 }}>搜索</Text></TouchableOpacity>
        </View>
        <ScrollView style={Style.content}>
          <View style={{
            padding: 15,
          }}>
            <View style={{ marginBottom: 10 }}><Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>搜索记录</Text></View>
            <View style={{
              flexDirection: 'row',
              alignItems: 'center',
              flexWrap: 'wrap',
            }}>
              {asyncList.records && asyncList.records.map((item, index) => (
                <View
                  key={index}
                  style={{
                    flexDirection: 'row',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    backgroundColor: '#f6f5f5',
                    marginBottom: 10,
                    borderRadius: 4,
                  }}>
                  <TouchableOpacity
                    onPress={() => {
                      Actions.searchResults({ keyword: item.keyword, id: item.id })
                    }}
                    style={{
                      flex: 1,
                      paddingHorizontal: 10,
                    }}
                  >
                    <Text style={{ fontSize: 14, color: '#262626', lineHeight: 30, }}>{item.keyword}</Text>
                  </TouchableOpacity>
                  <TouchableOpacity
                    onPress={() => {
                      this.searchLogDel(item.id)
                    }}
                    style={{
                      width: 22,
                      height: 22,
                      alignItems: 'center',
                      justifyContent: 'center',
                    }}
                  >
                    <Icon name="md-close" size={12} color={'#61676F'} />
                  </TouchableOpacity>
                </View>

              ))}
              {asyncList.records && asyncList.records.length <= 0 && <Text style={{ fontSize: 14, color: '#262626', lineHeight: 32, textAlign: 'center' }}>暂无记录</Text>}
            </View>
          </View>
          <View style={{
            padding: 15,
            paddingRight: 0
          }}>
            <View style={{ marginBottom: 10 }}><Text style={{ fontSize: 14, color: '#61676F', lineHeight: 16, }}>热门搜索</Text></View>
            <View style={{
              flexDirection: 'row',
              alignItems: 'center',
              flexWrap: 'wrap',
            }}>
              {recommendList.map((item, index) => (
                <TouchableOpacity
                  key={index}
                  onPress={() => {
                    Actions.searchResults({ keyword: item.keyword, id: item.id })
                  }}
                  style={{
                    marginRight: 15,
                    height: 30,
                    paddingLeft: 10,
                    paddingRight: 10,
                    marginBottom: 10,
                    paddingHorizontal: 10,
                    borderRadius: 4,
                    backgroundColor: '#f6f5f5',
                  }}
                ><Text style={{ fontSize: 14, color: '#262626', lineHeight: 32, }}>{item.keyword}</Text></TouchableOpacity>
              ))}
              {recommendList.length <= 0 && <Text style={{ fontSize: 14, color: '#262626', lineHeight: 32, textAlign: 'center' }}>暂无记录</Text>}
            </View>
          </View>
        </ScrollView>
      </View >
    );
  }
}


export default connect(({ user }) => ({
  user,
}))(pureRender(Search))
